<template>
  <div id="app">
    <div class="dashboard-header">
      <h1>电商平台实时监控系统</h1>
      <div class="header-info">
        <span>📅 2019-01-01 00:00:00</span>
      </div>
    </div>
    <div class="dashboard-content">
      <!-- 上面三个图表 -->
      <div class="chart-row">
        <div class="chart-container left">
          <Chat01View></Chat01View>
        </div>
        <div class="chart-container middle">
          <Chat02View></Chat02View>
        </div>
        <div class="chart-container right">
          <Chat03View></Chat03View>
        </div>
      </div>
      <!-- 下面三个图表 -->
      <div class="chart-row">
        <div class="chart-container left">
          <Chat04View></Chat04View>
        </div>
        <div class="chart-container middle">
          <Chat05View></Chat05View>
        </div>
        <div class="chart-container right">
          <Chat06View></Chat06View>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Chat01View from './Chat01View.vue';
import Chat02View from './Chat02View.vue';
import Chat03View from './Chat03View.vue';
import Chat04View from './Chat04View.vue';
import Chat05View from './Chat05View.vue';
import Chat06View from './Chat06View.vue';
</script>

<style>
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0b1c2d;
}

#app {
  width: 100vw;  /* 使用视窗宽度 */
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;  /* 添加溢出隐藏 */
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #1a2b3c;
  color: #fff;
  font-size: 15px;
  border-bottom: 2px solid #0b1c2d;
  height: 5%;
}

.header-info {
  font-size: 14px;
}

.dashboard-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
  height: 95%;
  overflow: hidden;  /* 添加溢出隐藏 */
  box-sizing: border-box;  /* 添加盒模型设置 */
}

.chart-row {
  display: flex;
  flex: 1;
  gap: 10px;
  width: 100%;
  overflow: hidden;  /* 添加溢出隐藏 */
  box-sizing: border-box;  /* 添加盒模型设置 */
}

.chart-container {
  background: #142957;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;  /* 添加盒模型设置 */
}

.chart-container.left {
  width: 30%;
}

.chart-container.middle {
  width: 38%;
}

.chart-container.right {
  width: 30%;
}
</style>